<template>
  <el-container style="height: 100vh">
    <el-aside width="250px">
      <el-scrollbar>
        <el-menu :default-openeds="['home','lazada-ph']">
          <!-- 首页 -->
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>首页
          </el-menu-item>

          <!-- 遍历平台 -->
          <el-submenu
            v-for="(item, index) in platform"
            :key="index"
            :index="item.index"
          >
            <template #title>
              <i class="el-icon-menu"></i>{{ item.title }}
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(i, index1) in item.country"
                :key="index1"
                :index="i.index"
              >
                <i class="el-icon-star-off"></i>{{ i.name }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!-- 系统设置 -->
          <el-submenu index="setting">
            <template #title>
              <i class="el-icon-s-tools"></i>系统设置
            </template>

            <!-- 权限管理 -->
            <el-submenu index="system-auth">
              <template #title>
                <i class="el-icon-s-management"></i>系统权限
              </template>
              <!-- 遍历权限管理 -->
              <el-menu-item-group>
                <el-menu-item
                  v-for="(item, index) in sysAuth"
                  :key="index"
                  :index="item.index"
                >
                  <router-link :to="{ path: item.index }">{{
                    item.title
                  }}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 授权管理 -->
            <el-submenu index="shop-auth">
              <template #title>
                <i class="el-icon-s-shop"></i>店铺授权
              </template>
              <!-- 遍历授权管理 -->
              <el-submenu
                v-for="(item, index) in auth"
                :key="index"
                :index="item.index"
              >
                <template #title>
                  <i class="el-icon-menu"></i>
                  {{ item.title }}
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    v-for="(i, index1) in item.country"
                    :key="index1"
                    :index="i.index"
                  >
                    <i class="el-icon-star-off"></i>{{ i.name }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header>
        <span style="margin-right: 10px">王小虎</span>
        <button>退出登录</button>
      </el-header>

      <el-main>
        <router-view></router-view>
        <!-- <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table> -->
      </el-main>
    </el-container>
  </el-container>
</template>
  
  <style lang="scss" src="../assets/scss/index.scss" scoped></style>
  
<script>
export default {
  data() {
    return {
      platform: [
        {
          title: "Lazada",
          index: "lazada",
          country: [
            { name: "泰国", index: "lazada-th" },
            { name: "菲律宾", index: "lazada-ph" },
          ],
        },
        {
          title: "Shopee",
          index: "shopee",
          country: [
            { name: "泰国", index: "shopee-th" },
            { name: "菲律宾", index: "shopee-ph" },
          ],
        },
        {
          title: "Tiktok",
          index: "tiktok",
          country: [
            { name: "泰国", index: "tiktok-th" },
            { name: "菲律宾", index: "tiktok-ph" },
          ],
        },
      ],
      auth: [
        {
          title: "Auth-Lazada",
          index: "auth-lazada",
          country: [
            { name: "泰国", index: "auth-lazada-th" },
            { name: "菲律宾", index: "auth-lazada-ph" },
          ],
        },
        {
          title: "Auth-Shopee",
          index: "auth-shopee",
          country: [
            { name: "泰国", index: "auth-shopee-th" },
            { name: "菲律宾", index: "auth-shopee-ph" },
          ],
        },
        {
          title: "Auth-Tiktok",
          index: "auth-tiktok",
          country: [
            { name: "泰国", index: "auth-tiktok-th" },
            { name: "菲律宾", index: "auth-tiktok-ph" },
          ],
        },
      ],
      sysAuth: [
        {
          title: "新增用户权限",
          index: "addUser",
        },
        {
          title: "删除用户权限",
          index: "deleteUser",
        },
        {
          title: "修改用户权限",
          index: "changeUser",
        },
        {
          title: "查询用户权限",
          index: "queryUser",
        },
      ],
    };
  },
};
</script>
  